<template>
<section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div class="es-form-item">
              <div class="form-label">下拉框</div>
              <div style="margin-top:20px;" class="stylebox flex-row flex-align-c">
                  <el-input v-model="custormItemData.name" size="small" placeholder="请输入标题"></el-input>
              </div>
    </div>
    <div class="es-form-item" >
            <div class="form-label">选项</div>
            <div v-for="(item,index) in custormItemData.meal" :key="index" @mouseenter="enter(index)" @mouseleave="leave()" style="position: relative;">
                <el-input v-model="item.balanceone" placeholder="请输入选项" style="margin-top:10px;" ></el-input>
                <div v-show="seen&&index==current" style="position: absolute;top: 20px; right:10px;">
                  <!-- @click="delMeal(index)" -->
                                <!-- <i class="el-icon-delete-solid" style="cursor:pointer;" ></i> -->
                                <el-popconfirm
                                    confirmButtonText='好的'
                                    cancelButtonText='不用了'
                                    icon="el-icon-info"
                                    iconColor="red"
                                    title="你确定要删除这一项吗？"
                                    @onConfirm="delMeal(index)"
                                  >
                                   <i slot="reference" class="el-icon-delete-solid" style="cursor:pointer;" ></i>
                                  </el-popconfirm>
                            </div>

            </div>
           <div style="margin:10px 0px 0px 90px;">
                <div style="width:100px;padding:10px;border-radius:5px;border:1px dashed #000;text-align: center;cursor:pointer;" @click="addtc">
                +添加选项
                </div>
           </div>

    </div>
      <div class="es-form-item">
            <div class="form-label">是否必填</div>
            <!-- <div style="margin-top:20px;" class="stylebox flex-row flex-align-c">
                <div style="width:50px;">内容</div>
                <el-input v-model="custormItemData.tips" size="small" ></el-input>
            </div> -->
             <el-radio-group v-model="custormItemData.required">
                <div style="margin-left:50px;">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="2">否</el-radio>
                </div>
              </el-radio-group>
    </div>
</section>

</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      seen: false,
      current: 0,
      flag: 1
    }
  },

  methods: {

    enter(index) {
      this.seen = true
      this.current = index
    },
    leave() {
      this.seen = false
      this.current = null
    },
    delMeal(index) {
      if (this.custormItemData.meal.length < 2) {
        return this.$message.error('操作失败！,至少保留一项')
      } else {
        this.flag = index
        this.custormItemData.meal.splice(index, 1)
      }
    },
    addtc() {
      this.custormItemData.meal.map(item=>{
        this.flag = item.id
      })
      this.custormItemData.meal.push({ balanceone: '', id:++this.flag})
    }

  }
}
</script>

<style lang="scss" scoped>
    .es-form-item{
          padding: 20px 23px;
          font-size: 12px;
          background: #f8f8fa;
          border-radius: 6px;
          margin-bottom: 10px;
    }

</style>
